<html>
    <head>
        <script>
            function log(msg)
            {
                var res = document.getElementById('res');
                res.innerHTML = res.innerHTML + msg + "<br>";
            }
            function test()
            {
                var slider = document.getElementById('slider');
                if (window.testRunner) {
                    testRunner.dumpAsText();
                    // slider drag
                    eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
                    eventSender.mouseDown();
                    eventSender.mouseMoveTo(slider.offsetLeft + 50, slider.offsetTop + 50);
                    eventSender.mouseUp();
                    // single click
                    eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
                    eventSender.mouseDown();
                    eventSender.mouseUp();
                    // single click again, should send no onchange event
                    eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
                    eventSender.mouseDown();
                    eventSender.mouseUp();
                    // On touch events, check if change event is dispatched at touch end
                    var x = slider.offsetLeft;
                    var y = slider.offsetTop + slider.clientHeight / 2;
                    var w = slider.clientWidth;

                    eventSender.clearTouchPoints();
                    eventSender.addTouchPoint(x + w / 2, y);
                    eventSender.touchStart();
                    eventSender.touchMove();
                    eventSender.releaseTouchPoint(0);
                    eventSender.touchEnd();
                }
            }
        </script>
    </head>
    <body onload="test()">
        This tests that slider controls get the onchange event and that it is sent after the DOMInput event.<br>
        <input type="range" id="slider" onchange="log('change')" oninput="log('input')" value=0 width=200px height=300px>
        <div id="res"></div>
    </body>
</html>
